<template>

    <el-form label-width="100px" ref="addForm" :model="addForm" :rules="rules">
        <el-form-item label="账号" prop="account">
            <el-input type="text" auto-complete="off" placeholder="请输入账号" v-model="addForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="type === 'add'">
            <el-input type="password" auto-complete="off" placeholder="请输入密码" v-model="addForm.password"></el-input>
        </el-form-item>

        <el-form-item label="用户组" prop="userGroup" :required="true">

            <el-select v-model="addForm.userGroup" placeholder="请选择用户组">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通管理员" value="普通管理员"></el-option>
            </el-select>

        </el-form-item>

        <el-form-item>
            <el-button type="primary" size="medium " @click="addBtn">{{ type === 'add' ? '添加' :
            '修改' }}</el-button>
            <!-- <el-button size="medium " @click="resetForm('addForm')">重置</el-button> -->
        </el-form-item>

    </el-form>
</template>

<script>
import axios from '@/utils/request';
export default {
    props: {
        type: {
            type: String,
            default: 'add'
        },
        defaultdata: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            addForm: {
                account: '',
                password: '',
                userGroup: '',
            },
            rules: {
                account: [
                    // 非空验证
                    { required: true, message: '请将账号输入完整', trigger: 'change' },
                ],
                password: [{ required: true, message: '请输入密码', trigger: 'change' }],
            }
        }
    },
    methods: {
        addBtn() {
            this.$emit('success', this.addForm)
        },
        resetForm() {
            this.$refs.addForm.resetFields();
            // console.log("----------");
        }
    },

    watch: {
        defaultdata: {
            handler: function () {
                this.addForm = { ...this.defaultdata }
            },
            immediate: true

        }
    }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 300px;
    height: 40px;
}
</style>